<template>
  <div class="brand-filter">
    <div class="item">
      <div class="head">分类：</div>
      <div class="body">
        <a href="javascript:;">美食</a>
        <a href="javascript:;">餐厨</a>
        <a href="javascript:;">洗护</a>
      </div>
    </div>
    <div class="item">
      <div class="head">产地：</div>
      <div class="body">
        <a href="javascript:;">中国</a>
        <a href="javascript:;">美国</a>
        <a href="javascript:;">英国</a>
        <a href="javascript:;">韩国</a>
        <a href="javascript:;">日本</a>
      </div>
    </div>
    <div class="item">
      <div class="head">字母：</div>
      <div class="body">
        <a href="javascript:;" v-for="(item, index) in filterData" :key="index">{{item.firstWord.toUpperCase()}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { findBrandList } from '@/api/brand'
export default {
  name: 'BrandFilter',
  setup () {
    const filterData = ref(null)
    const filterLoading = ref(false)
    // filterLoading.value = true
    findBrandList().then(data => {
      filterData.value = data.result
    })
    return { filterData, filterLoading }
  }
}
</script>
<style lang="less" scoped>
  .brand-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  .xtx-skeleton {
    padding: 10px 0;
  }
</style>
